<template name="task">
	<view class="wrap-container">
		<view v-if="status">
			<uni-nav-bar
				fixed
				title="任务"
				status-bar
				left-icon="left"
				background-color="#2163e0"
				color="#fff"
				@clickLeft="back" />
			<view class="list" v-if="list.length > 0">
				<view
					class="item"
					v-for="(item, index) in list"
					:key="index"
					@click="chse(item)">
					<div style="display: flex;">
						<image v-if="item.hydynamic.isWarn == '1'" src="../assets/warn.png" class="warn-dot"/>
						<div v-if="item.isClick == '1'" class="red-dot"></div>
						<view class="title ellipsis">{{ item.hyDemandPage.demandTitle }}</view>
					</div>
					<view class="content">{{ item.hyDemandPage.demandContent }}</view>
					<view class="footer">
						<view class="status">
							状态:
							<text v-show="item.hydynamic.demandStatus == 0">
								{{ "未开始" }}
							</text>
							<text v-show="item.hydynamic.demandStatus == 1">
								{{ "进行中" }}
							</text>
							<text v-show="item.hydynamic.demandStatus == 2">
								{{ "已完成" }}
							</text>
							<text v-show="item.hydynamic.demandStatus == 3">
								{{ "被驳回" }}
							</text>
							<text v-show="item.hydynamic.demandStatus == 4">
								{{ "已取消" }}
							</text>
						</view>
						<view class="expands">
							{{ item.departName }} {{ item.hyDemandPage.effectiveTime }}
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else> 暂无任务 </view>
		</view>
		<view v-else>
			<taskDetails :backOf="chse" :refresh="refresh" :dettail="detail"></taskDetails>
		</view>
	</view>
</template>
<script>
import * as api from "@/api/api";
export default {
	// 建议 创建每个组件时 都添加name属性 标识组件名称
	name: "task",
	components: {},

	data() {
		return {
			pageNo: 1,
			pageSize: 10,
			list: [],
			finished: false,
			loading: false,
			status: true,
			detail: {},
		};
	},
	// 计算属性 适配者模式
	computed: {},
	// 数据监听
	watch: {},
	/**
	 * 生命周期 类似 发布订阅者模式
	 */
	//监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
	//onInit() {},
	/** 监听页面加载
	 * 其参数为上个页面传递的数据，
	 * 参数类型为 Object（用于页面传参）
	 */
	onLoad() {
		this.getData();
	},
	// 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
	onShow() {},
	// 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听页面隐藏
	onHide() {},
	// 监听页面卸载
	onUnload() {},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		refresh(){
			this.getData();
		},
		chse(val) {
			if(!val || val.hydynamic.demandStatus == '0' || val.hydynamic.demandStatus == '1'){
				this.detail = val;
				this.status = !this.status;
			}else if(val.hydynamic.demandStatus == '2'){
				uni.navigateTo({
					url: "/pages/component/detail?id=" + val.hydynamic.id,
				});
			}else if(val.hydynamic.demandStatus == '3'){
				uni.showToast({
					title: "该任务已被驳回!",
				});
			}
			//调用已读接口
			if(val){
				if(val.isClick == '1'){
					var data = {
						dynamicId: val.hydynamic.id,
					};
					api.hyUserClick(data).then(({ data: e }) => {
						this.refresh();
					});
				}
			}
		},
		getData(data = {}) {
			let { status = "init", success = () => {} } = data;
			if (status == "init") {
				this.pageNo = 1;
				this.list = [];
				this.finished = false;
			}
			this.loading = true;
			api.hyUserGetTaskInfo({}).then(({ data: e }) => {
					if (e.success) {
						this.list = e.result;
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
	},
	/** ---------- */
	// 监听窗口尺寸变化 App、微信小程序、快手小程序
	//onResize() {},
	// 监听用户下拉动作，一般用于下拉刷新
	//onPullDownRefresh() {},
	// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
	//onReachBottom() {},
	//点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
	//onTabItemTap() {},
	//用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
	//onShareAppMessage() {},
	//监听页面滚动 nvue暂不支持
	//onPageScroll() {},
	//监听原生标题栏按钮点击事件 App、H5
	//onNavigationBarButtonTap() {},
	/** 监听页面返回
	 * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
	 * navigateBack表示来源是 uni.navigateBack ；
	 * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
	 * app、H5、支付宝小程序
	 */
	//onBackPress() {},
	// 监听原生标题栏搜索输入框输入内容变化事件 App、H5
	//onNavigationBarSearchInputChanged() {},
	// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
	//onNavigationBarSearchInputConfirmed() {},
	// 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
	//onNavigationBarSearchInputClicked() {},
	// 监听用户点击右上角转发到朋友圈 微信小程序
	//onShareTimeline() {},
	// 监听用户点击右上角收藏 微信小程序、QQ小程序
	//onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.list {
	width: 100%;
	min-height: 100vh;

	.item {
		margin-bottom: 20upx;
		padding: 30upx;
		background-color: #fff;
		.ellipsis {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.title {
			position: relative;
			padding: 0 0 20upx 0;
			font-weight: 600;
			font-size: 28upx;
			color: #333;
		}
		.content {
			margin: 0 0 20upx 0;
			font-size: 24upx;
			color: #999;
			overflow: hidden;
			height: 62upx;
			line-height: 30upx;
			font-size: 26upx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-wrap: break-word;
		}
		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #ccc;
		}
	}
}
.empty {
	padding: 100upx 40upx;
	text-align: center;
	color: #aaa;
	font-size: 32upx;
}
.warn-dot{
	width: 20px;
	height: 20px;
	margin-right: 5px;
	
}
.red-dot{
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;
	margin-top: 3px;
	margin-right: 3px;
	display: inline-block;
}
</style>
